<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="汉语拼音声调在线学习平台，提供标准拼音声调发音，包括单韵母、复韵母、鼻韵母和整体认读音节的声调学习资源">
    <meta name="keywords" content="汉语拼音,拼音声调,拼音学习,在线读拼音,拼音发音,声调学习">
    <title>汉语拼音声调在线学习平台 | 标准声调发音工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <!-- 引入PDF生成库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --accent: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4ade80;
            --warning: #facc15;
            --danger: #f87171;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        @font-face {
            font-family: pinyin;
            src: url('/i/pinyin.ttf');
        }

        .pymp3,
        .py {
            font-family: pinyin;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'pinyin', 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: var(--dark);
            min-height: 100vh;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header Styles */
        header {
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            padding: 20px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        .logo-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            box-shadow: var(--shadow);
            font-size: 2rem;
            color: var(--primary);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .logo p {
            font-size: 1rem;
            opacity: 0.9;
        }

        .nav-menu {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .nav-btn {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.15);
            font-size: 1rem;
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 5px 0;
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

        .nav-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        .nav-btn:hover::before {
            transform: translateX(0);
        }

        .nav-btn.active {
            background: white;
            color: var(--primary);
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }

        /* Main Content */
        .main-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            padding: 30px 0;
        }

        /* 总进度条样式 */
        .total-progress {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 20px 25px;
            margin-bottom: 30px;
        }

        .total-progress h3 {
            font-size: 1.3rem;
            color: var(--secondary);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .total-progress h3 i {
            color: var(--accent);
        }

        .progress-container {
            width: 100%;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .progress-bar {
            height: 12px;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(to right, var(--accent), var(--primary));
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 30px;
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-title i {
            color: var(--accent);
            font-size: 1.8rem;
        }

        .section-desc {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(67, 97, 238, 0.05);
            border-radius: var(--border-radius);
            font-size: 1.1rem;
        }

        /* 拼音网格布局 - 纯CSS控制自适应列数 */
        .pinyin-grid {
            display: grid;
            gap: 15px;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        }

        /* 4 列 */
        .grid-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        /* 5 列 */
        .grid-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        /* 6 列 */
        .grid-6 {
            grid-template-columns: repeat(6, 1fr);
        }

        .pinyin-btn {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 20px;
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            border-radius: var(--border-radius);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: var(--transition);
            overflow: hidden;
            border: none;
        }

        .pinyin-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

        .pinyin-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .pinyin-btn:hover::before {
            transform: scaleX(1);
        }

        .pinyin-btn:active {
            transform: translateY(0);
        }

        .pinyin-char {
            font-size: 3rem;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 8px;
            transition: var(--transition);
            font-family: pinyin, sans-serif;
        }

        /* 大屏幕：每行6个 */
        @media (min-width: 1024px) {
            .pinyin-char {
                font-size: 3.5rem;
            }
        }

        /* 中等屏幕：每行5个 */
        @media (max-width: 1023px) and (min-width: 768px) {
            .pinyin-char {
                font-size: 2.8rem;
            }
        }

        /* 小屏幕：每行4个 */
        @media (max-width: 767px) and (min-width: 480px) {
            .pinyin-char {
                font-size: 2.5rem;
            }
        }

        /* 超小屏幕：每行3个 */
        @media (max-width: 479px) {
            .pinyin-char {
                font-size: 2rem;
            }
        }

        .pinyin-btn:hover .pinyin-char {
            color: var(--primary);
            transform: scale(1.1);
        }

        .pinyin-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--accent);
            font-size: 1.2rem;
        }

        /* 学习状态指示器 */
        .learned-indicator {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 20px;
            height: 20px;
            background: var(--success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }

        .learned .learned-indicator {
            opacity: 1;
            transform: scale(1);
        }

        /* Sidebar */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .info-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 25px;
        }

        .info-card h3 {
            font-size: 1.4rem;
            color: var(--secondary);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary);
        }

        .info-list {
            list-style: none;
        }

        .info-list li {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .info-list li:last-child {
            border-bottom: none;
        }

        .info-list i {
            color: var(--accent);
            margin-top: 4px;
        }

        .quick-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .quick-link {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background: rgba(67, 97, 238, 0.05);
            border-radius: 8px;
            color: var(--dark);
            text-decoration: none;
            transition: var(--transition);
            gap: 10px;
        }

        .quick-link:hover {
            background: rgba(67, 97, 238, 0.1);
            transform: translateX(5px);
        }

        .quick-link i {
            color: var(--primary);
        }

        /* Footer */
        footer {
            background: var(--dark);
            color: white;
            padding: 40px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h4 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: var(--accent);
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-link {
            display: inline-block;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-link:hover {
            background: var(--primary);
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.7;
        }

        /* Audio Player */
        #player {
            display: none;
        }

        /* Animation */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateX(0px);
            }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        /* 学习进度提示 */
        .progress-popup {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--success);
            color: white;
            padding: 15px 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            z-index: 1000;
            transform: translateX(120%);
            transition: transform 0.5s ease;
        }

        .progress-popup.show {
            transform: translateX(0);
        }

        /* 声调示例样式 */
        .tone-example {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 15px 0 25px;
            gap: 12px;
        }

        .tone-example span {
            display: inline-block;
            padding: 10px 18px;
            background: var(--primary);
            color: white;
            border-radius: 20px;
            font-weight: bold;
            font-family: pinyin, sans-serif;
            font-size: 1.2rem;
            box-shadow: 0 3px 8px rgba(67, 97, 238, 0.3);
        }

        /* 声调分类说明 */
        .tone-category {
            background: #f8f9fa;
            padding: 15px;
            border-radius: var(--border-radius);
            margin-top: 25px;
        }

        .tone-category p {
            margin-bottom: 8px;
            line-height: 1.6;
        }

        /* Responsive */
        @media (min-width: 768px) {
            .main-content {
                grid-template-columns: 1fr 350px;
            }

            .header-container {
                flex-wrap: nowrap;
            }

            .logo {
                margin-bottom: 0;
            }

            .card-header {
                flex-wrap: nowrap;
            }
        }

        /* 转置表格样式 */
        .transposed-table {
            width: 100%;
            overflow-x: auto;
            margin: 20px 0;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

        .transposed-table table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }

        .transposed-table th,
        .transposed-table td {
            padding: 8px 0px;
            text-align: center;
            border: 1px solid #e0e0e0;
            min-width: 20px;
            transition: all 0.2s ease;
        }

        .transposed-table th {
            background-color: #4361ee;
            color: white;
        }

        .transposed-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .transposed-table .val {
            cursor: pointer;
            font-family: pinyin, sans-serif;
            font-size: 1rem;
            color: var(--secondary);
        }

        .transposed-table .val:hover {
            background-color: #e6f0ff;
            transform: scale(1.05);
        }

        .transposed-table .val.active {
            background-color: var(--accent);
            color: white;
            box-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
        }

        /* 韵母类别背景色 */
        .single-vowel {
            background-color: #91bf78;
            color: white;
            font-weight: bold;
        }

        .compound-vowel {
            background-color: #a6cc90;
            color: white;
            font-weight: bold;
        }

        .nasal-vowel {
            background-color: #6b8e22;
            color: white;
            font-weight: bold;
        }

        .nasal-vowel2 {
            background-color: #6b8e00;
            color: white;
            font-weight: bold;
        }

        .triple-vowel {
            background-color: #4cc9f0;
            color: white;
            font-weight: bold;
        }

        /* 表格控制按钮 */
        .table-controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .control-btn {
            padding: 10px 20px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .control-btn:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .control-btn.active {
            background: var(--accent);
            box-shadow: 0 0 15px rgba(76, 201, 240, 0.5);
        }

        /* 图例 */
        .legend {
            display: flex;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        .single-vowel-color {
            background-color: #91bf78;
        }

        .compound-vowel-color {
            background-color: #a6cc90;
        }

        .nasal-vowel-color {
            background-color: #6b8e22;
        }

        .nasal-vowel-color2 {
            background-color: #6b8e00;
        }

        .triple-vowel-color {
            background-color: #4cc9f0;
        }

        /* 转置说明 */
        .transpose-info {
            display: none;
            /* 隐藏转置相关说明 */
        }

        /* 下拉选择器样式 */
        #toneSelector {
            padding: 10px 15px;
            border-radius: var(--border-radius);
            border: 1px solid #ddd;
            background: white;
            font-family: inherit;
            font-size: 1rem;
            margin-left: 10px;
        }

        .category-row {
            background-color: #eef2f7;
        }

        .category-row td {
            font-weight: bold;
            color: var(--secondary);
            text-align: center;
            padding: 8px;
        }

        /* 打印样式优化 */
        @media print {

            header,
            footer,
            .table-controls,
            .legend,
            .transpose-info {
                display: none !important;
            }

            .card {
                box-shadow: none !important;
                border: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            .transposed-table {
                box-shadow: none !important;
                margin: 0 !important;
            }

            table,
            th,
            td {
                border-color: #999 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            body {
                background: white !important;
            }
        }

        /* 打印页面设置 */
        @page {
            size: landscape;
            /* 默认横向打印 */
            margin: 1.5cm;
            /* 设置页边距 */
        }

        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, .3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- 学习进度提示 -->
    <div class="progress-popup">
        <i class="fas fa-check-circle"></i> 学习进度已更新！
    </div>

    <!-- Header -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="logo-text">
                    <h1>汉语拼音声调学习</h1>
                    <p>标准声调发音点读工具</p>
                </div>
            </div>
            <div class="nav-menu">
                <a href="/" class="nav-btn"><i class="fas fa-book"></i>学拼音</a>
                <a href="/shengdiao.html" class="nav-btn"><i class="fas fa-music"></i> 读声调</a>
                <a href="/yinjiebiao.html" class="nav-btn active"><i class="fas fa-table"></i> 音节表</a>
                <a href="/" class="nav-btn"><i class="fas fa-ellipsis-h"></i> 更多</a>
            </div>
        </div>
    </header>


    <!-- Main Content -->
    <div class="container">
        <div class="main-area">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">
                        <i class="fas fa-table"></i> 汉语拼音音节表
                    </h2>
                    <div class="table-controls">
                        <button class="control-btn" id="downloadPdfBtn">
                            <i class="fas fa-download"></i> 下载PDF
                            <span class="loading" style="display:none;"></span>
                        </button>
                        <button class="control-btn" id="printBtn">
                            <i class="fas fa-print"></i> 打印表格
                        </button>
                    </div>
                </div>

                <p class="section-desc">
                    点击任意单元格可听取发音。
                </p>

                <div class="table-controls">
                    <label>
                        <span>选择要读的声调:</span>
                        <select id="toneSelector">
                            <option value="0">全部声调</option>
                            <option value="1">第一声 (阴平)</option>
                            <option value="2">第二声 (阳平)</option>
                            <option value="3">第三声 (上声)</option>
                            <option value="4">第四声 (去声)</option>
                        </select>
                    </label>
                </div>

                <div class="transposed-table">
                    <table class="pinyin-table" id="pinyinTable">
                        <thead>
                            <tr>
                                <th>韵母/声母</th>
                                <th>b</th>
                                <th>p</th>
                                <th>m</th>
                                <th>f</th>
                                <th>d</th>
                                <th>t</th>
                                <th>n</th>
                                <th>l</th>
                                <th>g</th>
                                <th>k</th>
                                <th>h</th>
                                <th>j</th>
                                <th>q</th>
                                <th>x</th>
                                <th>zh</th>
                                <th>ch</th>
                                <th>sh</th>
                                <th>r</th>
                                <th>z</th>
                                <th>c</th>
                                <th>s</th>
                                <th>y</th>
                                <th>w</th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            <!-- 单韵母 -->
                            <tr>
                                <td class="single-vowel">a</td>
                                <td class="val">ba</td>
                                <td class="val">pa</td>
                                <td class="val">ma</td>
                                <td class="val">fa</td>
                                <td class="val">da</td>
                                <td class="val">ta</td>
                                <td class="val">na</td>
                                <td class="val">la</td>
                                <td class="val">ga</td>
                                <td class="val">ka</td>
                                <td class="val">ha</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zha</td>
                                <td class="val">cha</td>
                                <td class="val">sha</td>
                                <td></td>
                                <td class="val">za</td>
                                <td class="val">ca</td>
                                <td class="val">sa</td>
                                <td class="val">ya</td>
                                <td class="val">wa</td>
                            </tr>
                            <tr>
                                <td class="single-vowel">o</td>
                                <td class="val">bo</td>
                                <td class="val">po</td>
                                <td class="val">mo</td>
                                <td class="val">fo</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">lo</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">yo</td>
                                <td class="val">wo</td>
                            </tr>
                            <tr>
                                <td class="single-vowel">e</td>
                                <td></td>
                                <td></td>
                                <td class="val">me</td>
                                <td></td>
                                <td class="val">de</td>
                                <td class="val">te</td>
                                <td class="val">ne</td>
                                <td class="val">le</td>
                                <td class="val">ge</td>
                                <td class="val">ke</td>
                                <td class="val">he</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhe</td>
                                <td class="val">che</td>
                                <td class="val">she</td>
                                <td class="val">re</td>
                                <td class="val">ze</td>
                                <td class="val">ce</td>
                                <td class="val">se</td>
                                <td class="val">ye</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="single-vowel">i</td>
                                <td class="val">bi</td>
                                <td class="val">pi</td>
                                <td class="val">mi</td>
                                <td></td>
                                <td class="val">di</td>
                                <td class="val">ti</td>
                                <td class="val">ni</td>
                                <td class="val">li</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">ji</td>
                                <td class="val">qi</td>
                                <td class="val">xi</td>
                                <td class="val">zhi</td>
                                <td class="val">chi</td>
                                <td class="val">shi</td>
                                <td class="val">ri</td>
                                <td class="val">zi</td>
                                <td class="val">ci</td>
                                <td class="val">si</td>
                                <td class="val">yi</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="single-vowel">u</td>
                                <td class="val">bu</td>
                                <td class="val">pu</td>
                                <td class="val">mu</td>
                                <td class="val">fu</td>
                                <td class="val">du</td>
                                <td class="val">tu</td>
                                <td class="val">nu</td>
                                <td class="val">lu</td>
                                <td class="val">gu</td>
                                <td class="val">ku</td>
                                <td class="val">hu</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhu</td>
                                <td class="val">chu</td>
                                <td class="val">shu</td>
                                <td class="val">ru</td>
                                <td class="val">zu</td>
                                <td class="val">cu</td>
                                <td class="val">su</td>
                                <td></td>
                                <td class="val">wu</td>
                            </tr>
                            <tr>
                                <td class="single-vowel">ü</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">nü</td>
                                <td class="val">lü</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">ju</td>
                                <td class="val">qu</td>
                                <td class="val">xu</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">yu</td>
                                <td></td>
                            </tr>

                            <!-- 复韵母 -->
                            <tr class="category-row">
                                <td colspan="24">复韵母</td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">ai</td>
                                <td class="val">bai</td>
                                <td class="val">pai</td>
                                <td class="val">mai</td>
                                <td></td>
                                <td class="val">dai</td>
                                <td class="val">tai</td>
                                <td class="val">nai</td>
                                <td class="val">lai</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">wai</td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">ei</td>
                                <td class="val">bei</td>
                                <td class="val">pei</td>
                                <td class="val">mei</td>
                                <td class="val">fei</td>
                                <td class="val">dei</td>
                                <td></td>
                                <td class="val">nei</td>
                                <td class="val">lei</td>
                                <td class="val">gei</td>
                                <td class="val">kei</td>
                                <td class="val">hei</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhei</td>
                                <td></td>
                                <td class="val">shei</td>
                                <td></td>
                                <td class="val">zei</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <<td class="val">wei</td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">ui</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">dui</td>
                                <td class="val">tui</td>
                                <td></td>
                                <td></td>
                                <td class="val">gui</td>
                                <td class="val">kui</td>
                                <td class="val">hui</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhui</td>
                                <td class="val">chui</td>
                                <td class="val">shui</td>
                                <td class="val">rui</td>
                                <td class="val">zui</td>
                                <td class="val">cui</td>
                                <td class="val">sui</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">ao</td>
                                <td class="val">bao</td>
                                <td class="val">pao</td>
                                <td class="val">mao</td>
                                <td></td>
                                <td class="val">dao</td>
                                <td class="val">tao</td>
                                <td class="val">nao</td>
                                <td class="val">lao</td>
                                <td class="val">gao</td>
                                <td class="val">kao</td>
                                <td class="val">hao</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhao</td>
                                <td class="val">chao</td>
                                <td class="val">shao</td>
                                <td class="val">rao</td>
                                <td class="val">zao</td>
                                <td class="val">cao</td>
                                <td class="val">sao</td>
                                <td class="val">yao</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">ou</td>
                                <td></td>
                                <td class="val">pou</td>
                                <td class="val">mou</td>
                                <td class="val">fou</td>
                                <td class="val">dou</td>
                                <td class="val">tou</td>
                                <td class="val">nou</td>
                                <td class="val">lou</td>
                                <td class="val">gou</td>
                                <td class="val">kou</td>
                                <td class="val">hou</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhou</td>
                                <td class="val">chou</td>
                                <td class="val">shou</td>
                                <td class="val">rou</td>
                                <td class="val">zou</td>
                                <td class="val">cou</td>
                                <td class="val">sou</td>
                                <td class="val">you</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">iu</td>
                                <td></td>
                                <td></td>
                                <td class="val">miu</td>
                                <td></td>
                                <td class="val">diu</td>
                                <td></td>
                                <td class="val">niu</td>
                                <td class="val">liu</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jiu</td>
                                <td class="val">qiu</td>
                                <td class="val">xiu</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">ie</td>
                                <td class="val">bie</td>
                                <td class="val">pie</td>
                                <td class="val">mie</td>
                                <td></td>
                                <td class="val">die</td>
                                <td class="val">tie</td>
                                <td class="val">nie</td>
                                <td class="val">lie</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jie</td>
                                <td class="val">qie</td>
                                <td class="val">xie</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">ye</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">üe</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">nüe</td>
                                <td class="val">lüe</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jue</td>
                                <td class="val">que</td>
                                <td class="val">xue</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">yue</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="compound-vowel">er</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>

                            <!-- 前鼻韵母 -->
                            <tr class="category-row">
                                <td colspan="24"></td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel">an</td>
                                <td class="val">ban</td>
                                <td class="val">pan</td>
                                <td class="val">man</td>
                                <td class="val">fan</td>
                                <td class="val">dan</td>
                                <td class="val">tan</td>
                                <td class="val">nan</td>
                                <td class="val">lan</td>
                                <td class="val">gan</td>
                                <td class="val">kan</td>
                                <td class="val">han</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhan</td>
                                <td class="val">chan</td>
                                <td class="val">shan</td>
                                <td class="val">ran</td>
                                <td class="val">zan</td>
                                <td class="val">can</td>
                                <td class="val">san</td>
                                <td class="val">yan</td>
                                <td class="val">wan</td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel">en</td>
                                <td class="val">ben</td>
                                <td class="val">pen</td>
                                <td class="val">men</td>
                                <td class="val">fen</td>
                                <td class="val">den</td>
                                <td></td>
                                <td class="val">nen</td>
                                <td></td>
                                <td class="val">gen</td>
                                <td class="val">ken</td>
                                <td class="val">hen</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhen</td>
                                <td class="val">chen</td>
                                <td class="val">shen</td>
                                <td class="val">ren</td>
                                <td class="val">zen</td>
                                <td class="val">cen</td>
                                <td class="val">sen</td>
                                <td></td>
                                <td class="val">wen</td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel">in</td>
                                <td class="val">bin</td>
                                <td class="val">pin</td>
                                <td class="val">min</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">nin</td>
                                <td class="val">lin</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jin</td>
                                <td class="val">qin</td>
                                <td class="val">xin</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">yin</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel">un</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">dun</td>
                                <td class="val">tun</td>
                                <td></td>
                                <td class="val">lun</td>
                                <td class="val">gun</td>
                                <td class="val">kun</td>
                                <td class="val">hun</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhun</td>
                                <td class="val">chun</td>
                                <td class="val">shun</td>
                                <td class="val">run</td>
                                <td class="val">zun</td>
                                <td class="val">cun</td>
                                <td class="val">sun</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel">ün</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jun</td>
                                <td class="val">qun</td>
                                <td class="val">xun</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">yun</td>
                                <td></td>
                            </tr>

                            <!-- 后鼻韵母 -->
                            <tr class="category-row">
                                <td colspan="24"></td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel2">ang</td>
                                <td class="val">bang</td>
                                <td class="val">pang</td>
                                <td class="val">mang</td>
                                <td class="val">fang</td>
                                <td class="val">dang</td>
                                <td class="val">tang</td>
                                <td class="val">nang</td>
                                <td class="val">lang</td>
                                <td class="val">gang</td>
                                <td class="val">kang</td>
                                <td class="val">hang</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhang</td>
                                <td class="val">chang</td>
                                <td class="val">shang</td>
                                <td class="val">rang</td>
                                <td class="val">zang</td>
                                <td class="val">cang</td>
                                <td class="val">sang</td>
                                <td class="val">yang</td>
                                <td class="val">wang</td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel2">eng</td>
                                <td class="val">beng</td>
                                <td class="val">peng</td>
                                <td class="val">meng</td>
                                <td class="val">feng</td>
                                <td class="val">deng</td>
                                <td class="val">teng</td>
                                <td class="val">neng</td>
                                <td class="val">leng</td>
                                <td class="val">geng</td>
                                <td class="val">keng</td>
                                <td class="val">heng</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zheng</td>
                                <td class="val">cheng</td>
                                <td class="val">sheng</td>
                                <td class="val">reng</td>
                                <td class="val">zeng</td>
                                <td class="val">ceng</td>
                                <td class="val">seng</td>
                                <td></td>
                                <td class="val">weng</td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel2">ing</td>
                                <td class="val">bing</td>
                                <td class="val">ping</td>
                                <td class="val">ming</td>
                                <td></td>
                                <td class="val">ding</td>
                                <td class="val">ting</td>
                                <td class="val">ning</td>
                                <td class="val">ling</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jing</td>
                                <td class="val">qing</td>
                                <td class="val">xing</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">ying</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="nasal-vowel2">ong</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">dong</td>
                                <td class="val">tong</td>
                                <td class="val">nong</td>
                                <td class="val">long</td>
                                <td class="val">gong</td>
                                <td class="val">kong</td>
                                <td class="val">hong</td>
                                <td class="val">jiong</td>
                                <td class="val">qiong</td>
                                <td class="val">xiong</td>
                                <td class="val">zhong</td>
                                <td class="val">chong</td>
                                <td></td>
                                <td class="val">rong</td>
                                <td class="val">zong</td>
                                <td class="val">cong</td>
                                <td class="val">song</td>
                                <td class="val">yong</td>
                                <td></td>
                            </tr>

                            <!-- 三拼音节韵母 -->
                            <tr class="category-row">
                                <td colspan="24"></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">i-ɑ</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">dia</td>
                                <td></td>
                                <td></td>
                                <td class="val">lia</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jia</td>
                                <td class="val">qia</td>
                                <td class="val">xia</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">i-ɑn</td>
                                <td class="val">bian</td>
                                <td class="val">pian</td>
                                <td class="val">mian</td>
                                <td></td>
                                <td class="val">dian</td>
                                <td class="val">tian</td>
                                <td class="val">nian</td>
                                <td class="val">lian</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jian</td>
                                <td class="val">qian</td>
                                <td class="val">xian</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">i-ɑng</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">niang</td>
                                <td class="val">liang</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jiang</td>
                                <td class="val">qiang</td>
                                <td class="val">xiang</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">i-ɑo</td>
                                <td class="val">biao</td>
                                <td class="val">piao</td>
                                <td class="val">miao</td>
                                <td></td>
                                <td class="val">diao</td>
                                <td class="val">tiao</td>
                                <td class="val">niao</td>
                                <td class="val">liao</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jiao</td>
                                <td class="val">qiao</td>
                                <td class="val">xiao</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">i-ong</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">jiong</td>
                                <td class="val">qiong</td>
                                <td class="val">xiong</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">u-ɑ</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">gua</td>
                                <td class="val">kua</td>
                                <td class="val">hua</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhua</td>
                                <td class="val">chua</td>
                                <td class="val">shua</td>
                                <td class="val">rua</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">u-ɑi</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">guai</td>
                                <td class="val">kuai</td>
                                <td class="val">huai</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhuai</td>
                                <td class="val">chuai</td>
                                <td class="val">shuai</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">u-ɑn</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">duan</td>
                                <td class="val">tuan</td>
                                <td class="val">nuan</td>
                                <td class="val">luan</td>
                                <td class="val">guan</td>
                                <td class="val">kuan</td>
                                <td class="val">huan</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhuan</td>
                                <td class="val">chuan</td>
                                <td class="val">shuan</td>
                                <td class="val">ruan</td>
                                <td class="val">zuan</td>
                                <td class="val">cuan</td>
                                <td class="val">suan</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">u-ɑng</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">guang</td>
                                <td class="val">kuang</td>
                                <td class="val">huang</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhuang</td>
                                <td class="val">chuang</td>
                                <td class="val">shuang</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">u-o</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">duo</td>
                                <td class="val">tuo</td>
                                <td class="val">nuo</td>
                                <td class="val">luo</td>
                                <td class="val">guo</td>
                                <td class="val">kuo</td>
                                <td class="val">huo</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">zhuo</td>
                                <td class="val">chuo</td>
                                <td class="val">shuo</td>
                                <td class="val">ruo</td>
                                <td class="val">zuo</td>
                                <td class="val">cuo</td>
                                <td class="val">suo</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="triple-vowel">ü-ɑn</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">juan</td>
                                <td class="val">quan</td>
                                <td class="val">xuan</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="val">yuan</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-color single-vowel-color"></div>
                        <span>单韵母 (ɑ, o, e, i, u, ü)</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color compound-vowel-color"></div>
                        <span>复韵母 (ɑi, ei, ui, ɑo, ou, iu, ie, üe, er)</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color nasal-vowel-color"></div>
                        <span>前鼻韵母 (ɑn, en, in, un, ün)</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color nasal-vowel-color2"></div>
                        <span>后鼻韵母 (ɑng, eng, ing, ong)</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color triple-vowel-color"></div>
                        <span>三拼音节韵母</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>学习资源</h4>
                    <div class="footer-links">
                        <a href="#" class="footer-link">拼音字母表</a>
                        <a href="#" class="footer-link">声母学习</a>
                        <a href="#" class="footer-link">韵母学习</a>
                        <a href="#" class="footer-link">声调练习</a>
                        <a href="#" class="footer-link">识字填拼音</a>
                        <a href="#" class="footer-link">拼音识字</a>
                        <a href="#" class="footer-link">拼音识词语</a>
                        <a href="#" class="footer-link">拼音错题本</a>
                    </div>
                </div>

                <div class="footer-section">
                    <h4>实用工具</h4>
                    <div class="footer-links">
                        <a href="#" class="footer-link">拼音点读</a>
                        <a href="#" class="footer-link">拼音测试</a>
                        <a href="#" class="footer-link">拼音游戏</a>
                        <a href="#" class="footer-link">汉字转拼音</a>
                    </div>
                </div>

                <div class="footer-section">
                    <h4>友情链接</h4>
                    <div class="footer-links">
                        <a href="https://www.hanyupinyin.net" class="footer-link" target="_blank">汉语拼音官网</a>
                        <a href="https://youquhome.com/" class="footer-link" target="_blank">有趣网址之家</a>
                        <a href="https://www.bjtime.net/" class="footer-link" target="_blank">北京时间</a>
                        <a href="https://www.schulte.top/" class="footer-link" target="_blank">注意力训练游戏</a>
                    </div>
                </div>
            </div>

            <div class="copyright">
                © 2023 HanYuPinYin.Net 汉语拼音在线学习平台 | 让汉语学习更简单
            </div>
        </div>
    </footer>

    <!-- Audio Player -->
    <audio id="player">
        您的浏览器不支持HTML5音频播放，请使用现代浏览器访问
    </audio>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 绑定按钮事件
            document.getElementById('downloadPdfBtn').addEventListener('click', downloadAsPdf);
            document.getElementById('printBtn').addEventListener('click', printTable);

            // 单元格点击事件
            document.querySelectorAll('.val').forEach(cell => {
                cell.addEventListener('click', function () {
                    const pinyin = this.textContent;
                    playPinyinSound(pinyin);
                });
            });
        });

        // 下载PDF功能 - 优化为单页显示
        function downloadAsPdf() {
            const downloadBtn = document.getElementById('downloadPdfBtn');
            const loadingIndicator = downloadBtn.querySelector('.loading');

            // 显示加载状态
            downloadBtn.disabled = true;
            loadingIndicator.style.display = 'inline-block';

            // 获取表格元素
            const tableElement = document.querySelector('.transposed-table');

            // 创建一个临时容器来构建PDF内容
            const pdfContainer = document.createElement('div');
            pdfContainer.style.width = '100%';
            pdfContainer.style.padding = '20px';
            pdfContainer.style.backgroundColor = 'white';

            // 添加头部内容
            const header = document.createElement('div');
            header.style.textAlign = 'center';
            header.style.marginBottom = '15px';
            header.innerHTML = `
                <h1 style="font-size: 20px; margin-bottom: 5px;">汉语拼音音节表</h1>
                <p style="font-size: 14px;">标准拼音声调发音学习表</p>
            `;
            pdfContainer.appendChild(header);

            // 克隆表格并添加到容器
            const tableClone = tableElement.cloneNode(true);
            // 确保表格完整显示
            tableClone.style.overflow = 'visible';
            tableClone.style.width = 'auto';
            pdfContainer.appendChild(tableClone);

            // 添加图例
            const legendClone = document.querySelector('.legend').cloneNode(true);
            legendClone.style.marginTop = '15px';
            pdfContainer.appendChild(legendClone);

            // 添加底部内容
            const footer = document.createElement('div');
            footer.style.textAlign = 'center';
            footer.style.marginTop = '15px';
            footer.style.fontSize = '12px';
            footer.innerHTML = `
                <p>© 2025 汉语拼音（HanYuPinYin.Net）在线学习平台 | 让汉语学习更简单</p>
            `;
            pdfContainer.appendChild(footer);

            // 将临时容器添加到页面但隐藏它
            pdfContainer.style.position = 'absolute';
            pdfContainer.style.top = '-10000px';
            pdfContainer.style.left = '-10000px';
            document.body.appendChild(pdfContainer);

            // 使用html2canvas捕获整个内容
            html2canvas(pdfContainer, {
                scale: 2, // 提高分辨率
                useCORS: true,
                logging: false,
                windowWidth: pdfContainer.scrollWidth,
                windowHeight: pdfContainer.scrollHeight
            }).then(canvas => {
                // 从页面移除临时容器
                document.body.removeChild(pdfContainer);

                // 引入jsPDF
                const { jsPDF } = window.jspdf;
                // 使用横向A4纸张
                const pdf = new jsPDF('2', 'mm', 'a4');

                // 获取PDF页面尺寸
                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();

                // 计算图像尺寸和缩放比例
                const imgWidth = canvas.width;
                const imgHeight = canvas.height;

                // 计算缩放比例，确保表格能完全放入页面
                const scaleX = pageWidth / imgWidth;
                const scaleY = pageHeight / imgHeight;
                const scale = Math.min(scaleX, scaleY) * 0.95; // 留5%的边距

                // 计算缩放后的图像尺寸
                const scaledWidth = imgWidth * scale;
                const scaledHeight = imgHeight * scale;

                // 计算居中位置
                const xOffset = (pageWidth - scaledWidth) / 2;
                const yOffset = (pageHeight - scaledHeight) / 2;

                // 添加图片到PDF
                pdf.addImage(
                    canvas.toDataURL('image/jpeg', 1.0),
                    'JPEG',
                    xOffset,
                    yOffset,
                    scaledWidth,
                    scaledHeight
                );

                // 保存PDF
                pdf.save('汉语拼音音节表.pdf');

                // 恢复按钮状态
                downloadBtn.disabled = false;
                loadingIndicator.style.display = 'none';

                // 显示提示
                showProgressPopup('PDF文件已生成，表格已缩放至单页');
            }).catch(error => {
                console.error('PDF生成失败:', error);
                // 确保移除临时容器
                if (pdfContainer.parentNode) {
                    document.body.removeChild(pdfContainer);
                }
                downloadBtn.disabled = false;
                loadingIndicator.style.display = 'none';
                showProgressPopup('PDF生成失败，请重试', true);
            });
        }

        // 打印表格功能
        function printTable() {
            // 显示打印提示
            showProgressPopup('正在准备打印...');

            // 延迟执行打印，确保提示已显示
            setTimeout(() => {
                // 调用浏览器打印功能
                window.print();

                // 打印完成后隐藏提示
                setTimeout(() => {
                    document.querySelector('.progress-popup').classList.remove('show');
                }, 1000);
            }, 500);
        }

        // 播放拼音发音
        function playPinyinSound(pinyin) {
            // 实际应用中这里会播放对应的音频文件
            console.log(`播放拼音: ${pinyin}`);
            showProgressPopup(`正在播放: ${pinyin}`);

            // 模拟播放效果
            const player = document.getElementById('player');
            player.src = `audio/${pinyin}.mp3`; // 假设音频文件路径
            try {
                player.play().catch(e => console.log('音频播放需要用户交互'));
            } catch (e) {
                console.log('音频播放功能未实现');
            }
        }

        // 显示进度提示
        function showProgressPopup(message, isError = false) {
            const popup = document.querySelector('.progress-popup');
            popup.innerHTML = isError ?
                `<i class="fas fa-exclamation-circle"></i> ${message}` :
                `<i class="fas fa-check-circle"></i> ${message}`;

            // 错误提示使用不同颜色
            popup.style.background = isError ? 'var(--danger)' : 'var(--success)';

            // 显示提示
            popup.classList.add('show');

            // 3秒后隐藏
            setTimeout(() => {
                popup.classList.remove('show');
            }, 3000);
        }
    </script>
</body>

</html>